<template>
  <div class="login-index">
    <div class="login-box">
      <el-form ref="form" :rules="rules" v-model="loginForm" label-width="80px" label-position="left">
        <h3 class="login-title">欢迎登录</h3>
        <el-form-item label="账号：" prop="phone">
          <el-input v-model="loginForm.phone" placeholder="请输入账号"/>
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"/>
        </el-form-item>
        <el-form-item>
          <div class="bottom-box">
            <el-checkbox v-model="isRemPwd" label="记住密码" size="large"/>
            <el-link type="primary" style="text-decoration: none;">忘记密码</el-link>
          </div>
        </el-form-item>
      </el-form>

      <el-button type="primary" @click="handleLogin">立即登录</el-button>
    </div>
  </div>

</template>

<script setup>
import {ref, reactive} from 'vue'
import {useRouter} from 'vue-router'
import {reqLogin} from '@/api/userinfo.js';
import {ElMessage} from "element-plus";

const router = useRouter()
const loginForm = reactive({
  phone: '18201288771',
  password: '111111'
})
const form = ref(null)
const isRemPwd = ref(false)
// 表单验证规则
const rules = {
  phone: [
    {required: true, message: '账号不能为空！！！', trigger: 'blur'},
    {pattern: /^1\d{10}$/, message: '账号为11位数字!', trigger: 'blur',},
  ],
  password: [
    {required: true, message: '密码不能为空！！！', trigger: 'blur'},
    {max: 18, min: 6, message: '密码长度必须在6-18位之间!', trigger: 'blur'}
  ],
};

// 加载状态
const isLoading = ref(false);
// 初始化加载状态
isLoading.value = false;

// 登录
const handleLogin = async () => {
  isLoading.value = true;
  const res = await reqLogin(loginForm);
  if (res.status === 200) {
    isLoading.value = false;
    await router.push('/home');
    const content = JSON.parse(res.data.content) || {};
    localStorage.setItem('userinfo--token', content.access_token);
    ElMessage.success('登录成功^_^');
  } else {
    ElMessage.error('登录失败!！');
  }
};

</script>

<style scoped lang="scss">
.login-index {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-size: cover;
  background: url('@/assets/images/bg-img1.png') no-repeat center center fixed;
  -webkit-background-size: cover; /* 指定背景图片的大小 */

  .login-box {
    width: 350px;
    background-color: #fff;
    opacity: 0.8;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

    h3.login-title {
      text-align: center;
      font-size: 20px;
      color: #1fb9f6;
    }

    .el-form-item {
      margin-bottom: 15px;
      text-align: center;

      .bottom-box {
        width: 100%;
        display: flex;
        justify-content: space-between;
      }
    }

    .el-button {
      color: #fff;
      width: 100%;
      margin-bottom: 20px;
    }
  }
}


</style>